<template>
<div class="extend-con">
    <el-dialog title="单张卡券发放" :visible.sync="oneData.dialogExtend"  :before-close="handleClose">
        <el-form label-width="90px" class="demo-ruleForm formstyle" :rules="rules" label-position="right" :model="ruleForm" ref="ruleForm">
            <el-row :gutter="21">
                <el-col :span="8">
                    <el-form-item label="家长手机号" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入家长手机号" :maxlength="11"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学生姓名" prop="studentName">
                        <el-input v-model="ruleForm.studentName" placeholder="请输入学生姓名" :maxlength="12"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" style="float:right" @click="searchData">查询</el-button>
                </el-col>          
            </el-row>
        </el-form>
        <div class="extend-cen">
            <el-row :gutter="21">
                <el-col :span="8">
                    <div class="extend-class-left">
                        <div class="extend-title">选择班级</div>
                        <ul>
                            <li v-for="(item, index) in classList" 
                            @click="setActive(index, item)" 
                            :class="{active:leftIndex == index}" :key="index" >{{item.sNickName}}</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="extend-class-right">
                        <el-table
                            ref="singleTable"
                            :data="tableData"
                            height="320"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            style="width: 100%">
                                    <el-table-column type="index" label="序号" width="50">
                                    </el-table-column>
                                    <el-table-column property="parentName" label="家长姓名">
                                    </el-table-column>
                                    <el-table-column property="parentPhone" label="手机号">
                                    </el-table-column>
                                    <el-table-column property="studentName" label="学生姓名">
                                    </el-table-column>
                                    <el-table-column property="relationName" label="家属关系">
                                    </el-table-column>
                        </el-table>
                    </div>
                </el-col>   
            </el-row>          
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="oneData.dialogExtend = false">取 消</el-button>
            <el-button type="primary" @click="extendCard" :loading="loadingBtn">确 定</el-button>
        </div>
    </el-dialog>  
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import validate from '@/utils/validate';
import {listClassInfoBySchoolId, listFamilyRelation, saveCardGrant} from 'api/cardCoupons'
export default {
    props: {
        oneData: {
            default() {
                return {
                    dialogExtend: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        return {
            ruleForm: {
                studentName: '',               
                phone: '',
                pid: ''// 激活状态的班级id
            },
            leftIndex: null,
            classList: [], // 班级列表
            loadingBtn: false,
            tableData: [],
            newSelection: [],
            currentRow: [], // 当前选中的
            rules: {
                leaderName: [
                    { required: true, message: '请输入负责人姓名', trigger: 'blur' }
                ],
                phone: [...validate.phone()]
            }
        }
    },
    watch: {
        'oneData.dialogExtend'(val) {
            if (val) {
                this.newSelection = [];
                this.multipleSelection = [];
                this.classList = [];
                this.tableData = [];
                this.leftIndex=null;
                this.getClasslist();
            }
        }
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.classList = [];
        this.tableData = [];
        this.getClasslist();
    },
    methods: {
        // setCurrent(row) {
        //     this.$refs.singleTable.setCurrentRow(row);
        // },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        // 确定发放
        extendCard(formName) {
            if (this.currentRow.pId) {
                // 确认将卡券"151XQthV8U686W2"发给学生"张小明"的家长"张明"吗？
                let card='';
                let student=this.currentRow.studentName;
                let parent=this.currentRow.parentName;
                let inforMag='确认将卡券'+card+'发给学生'+student+'的家长'+parent+'吗?';
                this.$confirm(inforMag, ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.sendCard()// 发放
                }).catch(() => {
                    this.$message.info('已取消');  
                });

            } else {
                this.$alert('请选择需要发放的用户后再点击发放!', ' ', {
                    confirmButtonText: '取消',
                    callback: action => {
                        this.$message.info('已取消');
                    }
                });
            }
            
        },
        // 发放
        sendCard() {
            this.loadingBtn=true;
            let grantUserId=[this.currentRow.parentUserId];// 家长id数组
            let grantUserName=[this.currentRow.parentName];// 家长名字数组
            let grantClassId=[this.currentRow.classId];// 班级id数组
            let grantCalssName=[this.currentRow.className];// 班级名字数组
            let schoolId=this.oneData.schoolId;
            let schoolName=this.oneData.schoolName;
            let serviceId=this.oneData.serviceId;
            let serviceName=this.oneData.serviceName;
            let orgUserId='';
            let orgUserName='';
            let pId=this.oneData.pId;
            // alert(pId)
            saveCardGrant(
                        grantUserId,
                        grantUserName,
                        grantClassId,
                        grantCalssName,
                        schoolId,
                        schoolName,
                        serviceId,
                        serviceName,
                        orgUserId,
                        orgUserName,
                        pId
                    ).then(res => {
                        this.loadingBtn=false;
                        this.$message.success('卡券发放成功！')
                        this.queryFarData();
                        this.clearData();
                    }).catch(() => {
                        this.loadingBtn=false
                    });
        },
        // 点击某个班级
        setActive(index, item) {
            this.leftIndex = index;
            this.ruleForm.pid = item.pId; // 班级的id
            this.getListFamily(this.ruleForm.pid);          
        },
        searchData() {
            if (!this.ruleForm.pid) {
                this.$message.error('请先选择班级再查询家长学生关系信息哟！');
                return
            }
            this.getListFamily(this.ruleForm.pid, this.ruleForm.phone, this.ruleForm.studentName);
        },
        queryFarData() {
            this.$emit('queryData');
            this.$emit('getCardNums'); // 2018-01-10 by cuihd
        },
        // 卡券发放家长学生信息（右侧信息）
        getListFamily(pid, phone, studentName) {
            listFamilyRelation(pid, phone, studentName).then(res => {
                this.tableData = res.data.content;
            }).catch(() => {
                this.tableData = []; 
            })
        },
        // 获取班级列表
        getClasslist() {
            listClassInfoBySchoolId(this.oneData.schoolId).then(res => {
                this.loading = false;
                this.classList = res.data.content;
                this.classList.forEach((val, index) => {
                    let newObj = {
                        classId: val.pId,
                        className: val.sNickName,
                        newMultiple: []
                    }
                    this.newSelection.push(newObj);
                });
                console.log(this.newSelection, '1111111111111111');
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.clearData();
        },
        handleClose() {
            this.$refs.ruleForm.resetFields();
            this.clearData();
        },
         //    清空数据
        clearData() {
            this.oneData.dialogExtend = false;
            this.tableData = [];
            this.ruleForm.studentName='';
            this.ruleForm.phone='';
            this.ruleForm.pid='';
            this.leftIndex=null;
        }
    }
}
</script>
<style lang="scss">
    .extend-con{
        ul,li{
            list-style:none;
            margin:0;
            padding: 0;
        }
        .el-dialog {
            width: 1000px;
            .el-dialog__body{
                padding: 25px 20px;
            }
            .el-dialog__footer{
                padding: 0 20px 25px;
            }
        }
        .el-table{
            border: 1px solid rgb(236, 227, 223);
        }
        .extend-class-left{           
            border: 1px solid #ddd;
            border-radius: 2px;
            .extend-title{
                background: #fafafa;
                line-height: 39px;
                font-size: 14px;
                color: #9a9a9a;
                border-bottom: 1px solid #ddd;
                text-indent: 20px;
            }
            ul{
                height: 280px;
                overflow: auto;
                li{
                    line-height: 38px;
                    text-indent: 18px;
                    cursor: pointer;
                    position: relative;
                    &:hover{
                        background: #f9f9f9;
                    }
                    &.active{
                        background: #f9f9f9;
                    }
                    &.active:after{
                        content: '选择中';
                        line-height: 38px;
                        color: #ff5e2c;
                        position: absolute;
                        right: 8px;
                        font-size: 12px;
                    }
                }
            }
            
        }
    }
</style>
